<template>
  <div class="header">
    <div class="header__side">
      <template v-for="item in headerData">
        <div :key="item" :style="headerSideHeight">
          {{ item }}
        </div>
      </template>
    </div>
    <div class="header_container_content">
      <div class="header__container__day" :style="headerSideHeight">
        {{ currentDay }} {{currentWeek}}
        <i class="iconfont icon-left" @click="changeDay('left')" :class="currentIndex===0 ? 'no_show_arraw' : 'show_arraw_hover'"></i>
        <i class="iconfont icon-right" @click="changeDay('right')" :class="currentIndex===(day.length-1) ? 'no_show_arraw' : 'show_arraw_hover'"></i>
      </div>
      <div class="header__container">
        <div class="header__container__hours" :style="headerContainerWidth">
          <div class="timegrid-now-indicator" :style="setTimeline" v-show="isShowTimeLine">
            <div class="timegrid-now-indicator-arrow-main" :style="{left: `${timelineLeft}px`}"></div>
            <div class="timegrid-now-indicator-line-main" :style="{left: `${timelineLeft}px`}"></div>
          </div>
          <template v-for="(item, index) in hour">
            <div :key="index" class="header__container__hour">
              {{ item }}
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { handleDaySet, handleHourSet } from './unit'
import i18n from '@src/locales';
const $t = i18n.t.bind(i18n);
let weekDay = [$t('common.base.aboutTime.sunday'), $t('common.base.aboutTime.monday'), $t('common.base.aboutTime.tuesday'), $t('common.base.aboutTime.wednesday'), $t('common.base.aboutTime.thursday'), $t('common.base.aboutTime.friday'), $t('common.base.aboutTime.saturday')];
import { safeNewDate } from '@src/util/time';
export default {
  name: 'chart-header',
  inject: ['ganttChartInstance'],
  props: {
    headerData: {
      type: Array,
      require: true,
      default: () => [i18n.t('common.base.date'), i18n.t('common.base.time')]
    }
  },
  data() {
    return {
      currentDay: '',
      currentWeek: '',
      currentIndex: 0,
      timelineLeft: 0,
      timer: null,
      isShowTimeLine: false,
    }
  },
  computed: {
    headerSideHeight () {
      return {
        lineHeight: `${this.ganttChartInstance.baseBlock}px`
      }
    },
    headerContainerWidth () {
      return {
        width: `${this.ganttChartInstance.baseHour * this.hour.length}px`,
        lineHeight: `${this.ganttChartInstance.baseBlock}px`
      }
    },
    hour () {
      const hours = this.day.length * 24
      return handleHourSet(hours)
    },
    day () {
      const { startTime, endTime } = this.ganttChartInstance.timeSectionDayJs
      return handleDaySet(startTime, endTime)
    },
    setTimeline () {
      return {
        height: `${this.ganttChartInstance.baseBlock}px`
      }
    },
  },
  methods: {
    setTimelineLeft() {
      let currentDate = moment();
      const isbefore = currentDate.isBefore(moment(this.ganttChartInstance.timeSectionDayJs.startTime), 'day')
      const isafter = currentDate.isAfter(moment(this.ganttChartInstance.timeSectionDayJs.endTime), 'day')
      if(isbefore || isafter){
        // 不显示当前时间线
        this.timelineLeft = 0;
        this.isShowTimeLine = false;
      }else{
        this.isShowTimeLine = true;
        if(this.timer) {
          clearInterval(this.timer);
        }
        this.timer = setInterval(()=> {
          let diff = moment().diff(
            moment(`${this.ganttChartInstance.timeSectionDayJs.startTime.format('YYYY/MM/DD')} 00:00:00`),
            'minute'
          )
          this.timelineLeft = this.ganttChartInstance.baseHour * diff / 60;
        }, 1000)
      }
    },
    updateDay(index) {
      this.currentDay = this.day[index];
      this.currentIndex = index;
      let date = safeNewDate(this.currentDay.replace(/-/g, '/'));
      this.currentWeek = weekDay[date.getDay()];
    },
    changeDay(type) {
      let index = this.day.indexOf(this.currentDay);
      if(index >= 0) {
        if(type === 'left') {
          if((index - 1) >= 0){
            this.currentDay = this.day[index - 1];
            this.currentIndex = index - 1;
            let date = safeNewDate(this.currentDay.replace(/-/g, '/'));
            this.currentWeek = weekDay[date.getDay()];
            this.$emit('scrollContainer', 'left')
          }
        }else if(type === 'right') {
          if((index + 1) <= (this.day.length - 1)){
            this.currentDay = this.day[index + 1];
            this.currentIndex = index + 1;
            let date = safeNewDate(this.currentDay.replace(/-/g, '/'));
            this.currentWeek = weekDay[date.getDay()];
            this.$emit('scrollContainer', 'right')
          }
        }
      }
    }
  },
  watch: {
    day: {
      immediate: true,
      handler(val) {
        if(val && val.length > 0) {
          this.currentDay = val[0];
          this.currentIndex = 0;
          let date = safeNewDate(this.currentDay.replace(/-/g, '/'));
          this.currentWeek = weekDay[date.getDay()];
          this.$emit('scrollContainer', 'begin')
        }
      }
    },
    'ganttChartInstance.timeSectionDayJs.startTime': {
      handler(newValue, oldValue) {
        this.setTimelineLeft()
      },
      deep: true,
      immediate: true
    },
    'ganttChartInstance.timeSectionDayJs.endTime': {
      handler(newValue, oldValue) {
        this.setTimelineLeft()
      },
      deep: true,
      immediate: true
    }
  },
  destroyed() {
    if(this.timer) {
      clearInterval(this.timer);
    }
  }
}
</script>

<style scoped lang="scss">
$header-background-color: #fff;
$header-side-background-color: rgb(123, 185, 254);
$header-border-color: #eee;

.header {
  display: grid;
  grid-template-columns: 100px 1fr;
  .header__side{
    // border-right: 1px solid #eee;
  }
  .header__side > div {
    display: grid;
    grid-template-columns: 10px 1fr;
    width: 100%;
    text-align: center;
    &::before {
      width: 0px;
      top: 8px;
      border-radius: 7px 0 0 7px;
      content: "";
      background-color: $header-side-background-color;
      display: block;
    }
  }

  .header_container_content {
    overflow: auto;
    .header__container__hours {
      position: relative;
      .timegrid-now-indicator {
        position: absolute;
        height: 40px;
        .timegrid-now-indicator-arrow-main {
          position: absolute;
          z-index: 4;
          border-width: 4px!important;
          border-top-color: #ff4d4f;
          border-bottom-color: #ff4d4f;
          background: red;
          /*margin-top: -4px;*/
          margin-left: -3px;
          width: 8px;
          height: 8px;
          border-radius: 4px;
        }
        .timegrid-now-indicator-line-main{
          position: absolute;
          z-index: 4;
          top: 0;
          bottom: 0;
          border-style: solid;
          border-color: red;
          border-width: 0 1px 0 0;
        }
      } 
    }
    &::-webkit-scrollbar {
      display: none;
    }
    .header__container__day {
      border: 1px solid $header-border-color;
      display: flex;
      justify-content: center;
      i {
        margin-left: 12px;
        color: #8c8c8c;
      }
      .show_arraw_hover {
        cursor: pointer;
        &:hover {
          color: $color-primary-light-6;
        }
      }
      .no_show_arraw {
        color: #eee;
      }
    }
  .header__container {
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    .header__container__hour {
      background-image: url("../../../../assets/img/gantt/background.png");
      font-size: 0.8em;
      color: #8c8c8c;
    }
    & > div {
      display: flex;
      & > div {
        text-align: center;
        flex: 1;
        vertical-align: middle;
      }
    }
    overflow: auto;
    // 滚动条
    &::-webkit-scrollbar {
      display: none;
    }
  }
}
}
</style>
